<template>
    <div id="VideoHome">
        <!-- 头部 -->
        <div class="header">
            <img src="/static/images/LOGO.png">
        </div>
        <!-- 侧边栏 -->
        <button type="button" class="el-button el-button--default is-circle in" @click="fold"><i class="el-icon-caret-top"></i></button>
        <button type="button" class="el-button el-button--default is-circle out" @click="unfold"><i class="el-icon-caret-bottom"></i></button>
        <div class="nav">
            <ul class="column">
                <li @click="gotoTop(170)">推荐</li>
                <li @click="gotoTop(710)">全部</li>
                <li @click="gotoTop(1270)">类别1</li>
                <li>作品</li>
                <li>科普</li>
                <li>类别2</li>
                <li>类别3</li>
                <li>类别4</li>
            </ul>
        </div>
        
        <!-- 推荐 -->
        <div class="hot">
            <p class="title">热门推荐</p>
            <div class="lb">
                <el-carousel :interval="4000" width="600px" height="330px" indicator-position="outside">
                    <el-carousel-item>
                        <img src="/static/images/lb/21.jpg">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="/static/images/lb/22.jpg">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="/static/images/lb/23.jpg">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="moves">
                <div class="move" @click="playVideo">
                    <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                    <div class="mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                        <div class="description">&nbsp;&nbsp;我始终我始终我始终我始终.我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终</div>
                    </div>
                    <img src="/static/images/hot/hot1.jpg" @mouseenter="upInfo()">
                    <span class="title_init">我是标题 标题是我 我是标题</span>
                    <div class="move_info" @mouseenter="upInfo()" @mouseleave="downInfo()">
                        <span class="move_title">我是标题 标题是我 我是标题</span>
                        <span class="move_name">作者：张浩</span>
                        <span class="move_count">播放量：2356</span>
                    </div>
                </div>
                <div class="move">
                    <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                    <div class="mask"  @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                        <div class="description"></div>
                    </div>
                    <img src="/static/images/hot/hot2.jpg" @mouseenter="upInfo()">
                    <span class="title_init">我是标题 标题是我 我是标题</span>
                    <div class="move_info" @mouseenter="upInfo()" @mouseleave="downInfo()">
                        <span class="move_title">我是标题 标题是我 我是标题</span>
                        <span class="move_name">作者：张浩</span>
                        <span class="move_count">播放量：2356</span>
                    </div>
                </div>
                <div class="move">
                    <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                    <div class="mask"  @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                        <div class="description"></div>
                    </div>
                    <img src="/static/images/hot/hot3.jpg" @mouseenter="upInfo()">
                    <span class="title_init">我是标题 标题是我 我是标题</span>
                    <div class="move_info" @mouseenter="upInfo()" @mouseleave="downInfo()">
                        <span class="move_title">我是标题 标题是我 我是标题</span>
                        <span class="move_name">作者：张浩</span>
                        <span class="move_count">播放量：2356</span>
                    </div>
                </div>
                <div class="move">
                    <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                    <div class="mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                        <div class="description"></div>
                    </div>
                    <img src="/static/images/hot/hot4.jpg" @mouseenter="upInfo()">
                    <span class="title_init">我是标题 标题是我 我是标题</span>
                    <div class="move_info" @mouseenter="upInfo()" @mouseleave="downInfo()">
                        <span class="move_title">我是标题 标题是我 我是标题</span>
                        <span class="move_name">作者：张浩</span>
                        <span class="move_count">播放量：2356</span>
                    </div>
                </div>
                <div class="move">
                    <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                    <div class="mask"  @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                        <div class="description"></div>
                    </div>
                    <img src="/static/images/hot/hot5.jpg" @mouseenter="upInfo()">
                    <span class="title_init">我是标题 标题是我 我是标题</span>
                    <div class="move_info" @mouseenter="upInfo()" @mouseleave="downInfo()">
                        <span class="move_title">我是标题 标题是我 我是标题</span>
                        <span class="move_name">作者：张浩</span>
                        <span class="move_count">播放量：2356</span>
                    </div>
                </div>
                <div class="move">
                    <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                    <div class="mask"  @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                        <div class="description"></div>
                    </div>
                    <img src="/static/images/hot/hot6.jpg" @mouseenter="upInfo()">
                    <span class="title_init">我是标题 标题是我 我是标题</span>
                    <div class="move_info" @mouseenter="upInfo()" @mouseleave="downInfo()">
                        <span class="move_title">我是标题 标题是我 我是标题</span>
                        <span class="move_name">作者：张浩</span>
                        <span class="move_count">播放量：2356</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分类 -->
        <div class="classification">
            <div class="all">
                <p class="title"># 全部</p>
                <div class="all_moves">
                    <div class="all_move">
                        <div class="move">
                            <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                            <div class="all_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                <div class="description">&nbsp;&nbsp;我始终我始终我始终我始终我始终我始终我始终我始终我始终,我始终我始终我始终我始终我始终我始终我始终我始终我始终.我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终</div>
                            </div>
                            <img src="/static/images/hot/hot1.jpg" @mouseenter="show_mask(1)">
                        </div>
                        <div class="all_info">
                            <p class="all_title">我是标题，标题是我，我是标题，标题是我</p>
                            <p class="all_author">作者：张浩</p>
                        </div>
                        
                        <div class="move_mask" @mouseenter="show_mask(1)" @mouseleave="hide_mask()">
                            <img class="play" src="/static/images/play.png">
                        </div>
                    </div>
                    <div class="all_move">
                        <div class="move">
                            <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                            <div class="all_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                <div class="description"></div>
                            </div>
                            <img src="/static/images/hot/hot2.jpg" @mouseenter="show_mask(1)">
                        </div>
                        <div class="all_info">
                            <p class="all_title">我是标题，标题是我，我是标题，标题是我</p>
                            <p class="all_author">作者：张浩</p>
                        </div>
                        <div class="move_mask" @mouseenter="show_mask(1)" @mouseleave="hide_mask()">
                            <img class="play" src="/static/images/play.png">
                        </div>
                    </div>
                    <div class="all_move">
                        <div class="move">
                            <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                            <div class="all_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                <div class="description"></div>
                            </div>
                            <img src="/static/images/hot/hot3.jpg" @mouseenter="show_mask(1)">
                        </div>
                        <div class="all_info">
                            <p class="all_title">我是标题，标题是我，我是标题，标题是我</p>
                            <p class="all_author">作者：张浩</p>
                        </div>
                        <div class="move_mask" @mouseenter="show_mask(1)" @mouseleave="hide_mask()">
                            <img class="play" src="/static/images/play.png">
                        </div>
                    </div>
                    <div class="all_move">
                        <div class="move">
                            <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                            <div class="all_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                <div class="description"></div>
                            </div>
                            <img src="/static/images/hot/hot4.jpg" @mouseenter="show_mask(1)">
                        </div>
                        <div class="all_info">
                            <p class="all_title">我是标题，标题是我，我是标题，标题是我</p>
                            <p class="all_author">作者：张浩</p>
                        </div>
                        <div class="move_mask" @mouseenter="show_mask(1)" @mouseleave="hide_mask()">
                            <img class="play" src="/static/images/play.png">
                        </div>
                    </div>
                    <div class="all_move">
                        <div class="move">
                            <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                            <div class="all_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                <div class="description"></div>
                            </div>
                            <img src="/static/images/hot/hot5.jpg" @mouseenter="show_mask(1)">
                        </div>
                        <div class="all_info">
                            <p class="all_title">我是标题，标题是我，我是标题，标题是我</p>
                            <p class="all_author">作者：张浩</p>
                        </div>
                        <div class="move_mask" @mouseenter="show_mask(1)" @mouseleave="hide_mask()">
                            <img class="play" src="/static/images/play.png">
                        </div>
                    </div>
                    <div class="all_move">
                        <div class="move">
                            <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                            <div class="all_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                <div class="description"></div>
                            </div>
                            <img src="/static/images/hot/hot6.jpg" @mouseenter="show_mask(1)">
                        </div>
                        <div class="all_info">
                            <p class="all_title">我是标题，标题是我，我是标题，标题是我</p>
                            <p class="all_author">作者：张浩</p>
                        </div>
                        <div class="move_mask" @mouseenter="show_mask(1)" @mouseleave="hide_mask()">
                            <img class="play" src="/static/images/play.png">
                        </div>
                    </div>
                    <div class="all_move">
                        <div class="move">
                            <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                            <div class="all_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                <div class="description"></div>
                            </div>
                            <img src="/static/images/hot/hot7.jpg" @mouseenter="show_mask(1)">
                        </div>
                        <div class="all_info">
                            <p class="all_title">我是标题，标题是我，我是标题，标题是我</p>
                            <p class="all_author">作者：张浩</p>
                        </div>
                        <div class="move_mask" @mouseenter="show_mask(1)" @mouseleave="hide_mask()">
                            <img class="play" src="/static/images/play.png">
                        </div>
                    </div>
                    <div class="all_move">
                        <div class="move">
                            <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                            <div class="all_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                <div class="description"></div>
                            </div>
                            <img src="/static/images/hot/hot8.jpg" @mouseenter="show_mask(1)">
                        </div>
                        <div class="all_info">
                            <p class="all_title">我是标题，标题是我，我是标题，标题是我</p>
                            <p class="all_author">作者：张浩</p>
                        </div>
                        <div class="move_mask" @mouseenter="show_mask(1)" @mouseleave="hide_mask()">
                            <img class="play" src="/static/images/play.png">
                        </div>
                    </div>
                    <div class="all_move">
                        <div class="move">
                            <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                            <div class="all_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                <div class="description"></div>
                            </div>
                            <img src="/static/images/hot/hot9.jpg" @mouseenter="show_mask(1)">
                        </div>
                        <div class="all_info">
                            <p class="all_title">我是标题，标题是我，我是标题，标题是我</p>
                            <p class="all_author">作者：张浩</p>
                        </div>
                        <div class="move_mask" @mouseenter="show_mask(1)" @mouseleave="hide_mask()">
                            <img class="play" src="/static/images/play.png">
                        </div>
                    </div>
                    <div class="all_move">
                        <div class="move">
                            <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                            <div class="all_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                <div class="description"></div>
                            </div>
                            <img src="/static/images/hot/hot10.jpg" @mouseenter="show_mask(1)">
                        </div>
                        <div class="all_info">
                            <p class="all_title">我是标题，标题是我，我是标题，标题是我</p>
                            <p class="all_author">作者：张浩</p>
                        </div>
                        <div class="move_mask" @mouseenter="show_mask(1)" @mouseleave="hide_mask()">
                            <img class="play" src="/static/images/play.png">
                        </div>
                    </div>
                </div>
            </div>
            <div class="type1">
                <p class="title"># 类型1</p>
                <div class="type_infos">
                    <div class="left">
                        <div class="type_move">
                            <div class="move">
                                <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                                <div class="type_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                    <div class="description">&nbsp;&nbsp;我始终我始终我始终我始终我始终我始终我始终我始终我始终.我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终</div>
                                </div>
                                <img src="/static/images/type1/type1.jpg" @mouseenter="show_mask(2)">
                            </div>
                            <div class="type_info">
                                <p class="type_title">我是标题，标题是我，我是标题，标题是我</p>
                                <p class="type_author">作者：张浩</p>
                            </div>
                            <div class="move_mask" @mouseenter="show_mask(2)" @mouseleave="hide_mask()">
                                <img class="play" src="/static/images/play.png">
                            </div>
                        </div>
                        <div class="type_move">
                            <div class="move">
                                <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                                <div class="type_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                    <div class="description">&nbsp;&nbsp;我始终我始终我始终我始终我始终我始终我始终我始终我始终.我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终</div>
                                </div>
                                <img src="/static/images/type1/type2.jpg" @mouseenter="show_mask(2)">
                            </div>
                            <div class="type_info">
                                <p class="type_title">我是标题，标题是我，我是标题，标题是我</p>
                                <p class="type_author">作者：张浩</p>
                            </div>
                            <div class="move_mask" @mouseenter="show_mask(2)" @mouseleave="hide_mask()">
                                <img class="play" src="/static/images/play.png">
                            </div>
                        </div>
                        <div class="type_move">
                            <div class="move">
                                <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                                <div class="type_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                    <div class="description">&nbsp;&nbsp;我始终我始终我始终我始终我始终我始终我始终我始终我始终.我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终</div>
                                </div>
                                <img src="/static/images/type1/type3.jpg" @mouseenter="show_mask(2)">
                            </div>
                            <div class="type_info">
                                <p class="type_title">我是标题，标题是我，我是标题，标题是我</p>
                                <p class="type_author">作者：张浩</p>
                            </div>
                            <div class="move_mask" @mouseenter="show_mask(2)" @mouseleave="hide_mask()">
                                <img class="play" src="/static/images/play.png">
                            </div>
                        </div>
                        <div class="type_move">
                            <div class="move">
                                <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                                <div class="type_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                    <div class="description">&nbsp;&nbsp;我始终我始终我始终我始终我始终我始终我始终我始终我始终.我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终</div>
                                </div>
                                <img src="/static/images/type1/type4.jpg" @mouseenter="show_mask(2)">
                            </div>
                            <div class="type_info">
                                <p class="type_title">我是标题，标题是我，我是标题，标题是我</p>
                                <p class="type_author">作者：张浩</p>
                            </div>
                            <div class="move_mask" @mouseenter="show_mask(2)" @mouseleave="hide_mask()">
                                <img class="play" src="/static/images/play.png">
                            </div>
                        </div>
                        <div class="type_move">
                            <div class="move">
                                <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                                <div class="type_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                    <div class="description">&nbsp;&nbsp;我始终我始终我始终我始终我始终我始终我始终我始终我始终.我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终</div>
                                </div>
                                <img src="/static/images/type1/type5.jpg" @mouseenter="show_mask(2)">
                            </div>
                            <div class="type_info">
                                <p class="type_title">我是标题，标题是我，我是标题，标题是我</p>
                                <p class="type_author">作者：张浩</p>
                            </div>
                            <div class="move_mask" @mouseenter="show_mask(2)" @mouseleave="hide_mask()">
                                <img class="play" src="/static/images/play.png">
                            </div>
                        </div>
                        <div class="type_move">
                            <div class="move">
                                <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                                <div class="type_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                    <div class="description">&nbsp;&nbsp;我始终我始终我始终我始终我始终我始终我始终我始终我始终.我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终</div>
                                </div>
                                <img src="/static/images/type1/type6.jpg" @mouseenter="show_mask(2)">
                            </div>
                            <div class="type_info">
                                <p class="type_title">我是标题，标题是我，我是标题，标题是我</p>
                                <p class="type_author">作者：张浩</p>
                            </div>
                            <div class="move_mask" @mouseenter="show_mask(2)" @mouseleave="hide_mask()">
                                <img class="play" src="/static/images/play.png">
                            </div>
                        </div>
                        <div class="type_move">
                            <div class="move">
                                <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                                <div class="type_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                    <div class="description">&nbsp;&nbsp;我始终我始终我始终我始终我始终我始终我始终我始终我始终.我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终</div>
                                </div>
                                <img src="/static/images/type1/type7.gif" @mouseenter="show_mask(2)">
                            </div>
                            <div class="type_info">
                                <p class="type_title">我是标题，标题是我，我是标题，标题是我</p>
                                <p class="type_author">作者：张浩</p>
                            </div>
                            <div class="move_mask" @mouseenter="show_mask(2)" @mouseleave="hide_mask()">
                                <img class="play" src="/static/images/play.png">
                            </div>
                        </div>
                        <div class="type_move">
                            <div class="move">
                                <p @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">简介</p>
                                <div class="type_mask" @mouseenter="downSynopsis()" @mouseleave="upSynopsis()">
                                    <div class="description">&nbsp;&nbsp;我始终我始终我始终我始终我始终我始终我始终我始终我始终.我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终我始终</div>
                                </div>
                                <img src="/static/images/type1/type8.jpg" @mouseenter="show_mask(2)">
                            </div>
                            <div class="type_info">
                                <p class="type_title">我是标题，标题是我，我是标题，标题是我</p>
                                <p class="type_author">作者：张浩</p>
                            </div>
                            <div class="move_mask" @mouseenter="show_mask(2)" @mouseleave="hide_mask()">
                                <img class="play" src="/static/images/play.png">
                            </div>
                        </div>
                    </div>
                    <p class="rank">排行榜</p>
                    <div class="right">
                        <ul>
                            <li class="active" @mousemove="modifyActive(0)">
                                <span style='background-color:gold'>1</span>
                                <img src="/static/images/type1/type1.jpg">
                                <div class="li_title">我是标题，标题是我，我是标题，标题是我，我是标题，标题是我</div>
                            </li>
                            <li class="unactive" @mousemove="modifyActive(1)">
                                <span style='background-color:rgb(204, 204, 204)'>2</span>
                                <img src="/static/images/type1/type2.jpg">
                                <div class="li_title">我是标题，标题是我，我是标题，标题是我</div>
                            </li>
                            <li class="unactive" @mousemove="modifyActive(2)">
                                <span style='background-color:rgba(163, 99, 14, 0.76)'>3</span>
                                <img src="/static/images/type1/type3.jpg">
                                <div class="li_title">我是标题，标题是我，我是标题，标题是我</div>
                            </li>
                            <li class="unactive" @mousemove="modifyActive(3)">
                                <span>4</span>
                                <img src="/static/images/type1/type4.jpg">
                                <div class="li_title">我是标题，标题是我，我是标题，标题是我</div>
                            </li>
                            <li class="unactive" @mousemove="modifyActive(4)">
                                <span>5</span>
                                <img src="/static/images/type1/type5.jpg">
                                <div class="li_title">我是标题，标题是我，我是标题，标题是我</div>
                            </li>
                            <li class="unactive" @mousemove="modifyActive(5)">
                                <span>6</span>
                                <img src="/static/images/type1/type6.jpg">
                                <div class="li_title">我是标题，标题是我，我是标题，标题是我</div>
                            </li>
                            <li class="unactive" @mousemove="modifyActive(6)">
                                <span>7</span>
                                <img src="/static/images/type1/type7.gif">
                                <div class="li_title">我是标题，标题是我，我是标题，标题是我</div>
                            </li>
                            <li class="unactive" @mousemove="modifyActive(7)">
                                <span>8</span>
                                <img src="/static/images/type1/type8.jpg">
                                <div class="li_title">我是标题，标题是我，我是标题，标题是我</div>
                            </li>
                            <li class="unactive" @mousemove="modifyActive(8)">
                                <span>9</span>
                                <img src="/static/images/type1/type2.jpg">
                                <div class="li_title">我是标题，标题是我，我是标题，标题是我</div>
                            </li>
                            <li class="unactive" @mousemove="modifyActive(9)">
                                <span>10</span>
                                <img src="/static/images/type1/type1.jpg">
                                <div class="li_title">我是标题，标题是我，我是标题，标题是我</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            <!-- 网站信息 -->
            <div class="info">
                <div class="left">
                    <div class="ll">
                        <p><strong>关于网站</strong></p>
                        <p>安阳师范学院官方网站</p>
                        <p>学校地址：河南省安阳市弦歌大道436号</p>
                        <p>邮政编码：455000</p>
                    </div>
                    <div class="lr">
                        <p><strong>维护支持</strong></p>
                        <p>版权所有：安阳师范学院</p>
                        <p>管理维护：党委宣传部</p>
                        <p>技术支持：网络与教育技术中心</p>
                    </div>
                </div>
                <div class="right">
                    <div class="rl">
                        <img src="/static/images/weixin.jpg">
                        <p>安阳师院微信</p>
                    </div>
                    <div class="rr">
                        <img src="/static/images/weibo.png">
                        <p>安阳师院微博</p>
                    </div>
                </div>
            </div>
            <!-- 版权信息 -->
            <div class="copyright">
                <div class="left">
                    <img src="/static/images/gwb.png">
                    <p>Copyright ©   2018 安阳师范学院</p>
                </div>
                <div class="right">
                    <img src="/static/images/blue_error.png">
                    <p>豫ICP备10001656号-1</p>
                    <p>豫公网安备41050202000028号</p>
                </div>
            </div>
        </div>
        <button type="button" class="el-button el-button--default is-circle top" @click="goBack"><i class="el-icon-upload2"></i></button>
    </div>
</template>

<script>

export default {
    data(){
        return{
            topVal: 0,
            isLeftOrRight: true,
            timer: null,
            all_array: [],
            type1_array: [],
        }
    },
    methods:{
        goBack(){
            $("html,body").animate({scrollTop:"0px"},500);
        },
        fold(){
            $(".in").hide();
            $(".out").show();
            $(".nav").stop().slideUp(500);
        },
        unfold(){
            $(".out").hide();
            $(".in").show();
            $(".nav").stop().slideDown(500);
        },
        downSynopsis(){
            let title_init_element = event.target.parentNode.children[3];
            let mask_element = event.target.parentNode.children[1];

            $(title_init_element).stop().hide();
            $(mask_element).stop().slideDown(200);
        },
        upSynopsis(){
            let title_init_element = event.target.parentNode.children[3];
            let mask_element = event.target.parentNode.children[1];

            $(mask_element).stop().slideUp(200);
            $(title_init_element).stop().show();
        },
        upInfo(){
            let title_init_element = event.target.parentNode.children[3];
            let move_info_element = event.target.parentNode.children[4];
            let moves = event.target.parentNode.parentNode.children;

            for(let i=0; i<moves.length; i++){
                if(moves[i].children[3] != title_init_element){
                    $(moves[i].children[4]).stop().hide();
                    $(moves[i].children[3]).stop().show();
                }
                
            }

            $(title_init_element).stop().hide();
            $(move_info_element).stop().show();
        },
        downInfo(){
            let title_init_element = event.target.parentNode.children[3];
            let move_info_element = event.target.parentNode.children[4];

            $(move_info_element).stop().hide();
            $(title_init_element).stop().show();
        },
        show_mask(flag){
            let title_init_element = event.target.parentNode.parentNode.lastChild;
            let play_element = event.target.parentNode.children[2];
            if(flag == 1){
                for(let i=0; i<this.all_array.length; i++){
                    if(this.all_array[i].lastChild != title_init_element){
                        $(this.all_array[i].lastChild).stop().fadeOut(300);
                    }
                }
            }else if(flag == 2){
                for(let i=0; i<this.type1_array.length; i++){
                    if(this.type1_array[i].lastChild != title_init_element){
                        $(this.type1_array[i].lastChild).stop().fadeOut(300);
                    }
                }
            }
            
            $(title_init_element).stop().fadeIn(300);
            $(play_element).stop().fadeIn(350);
        },
        hide_mask(){
            let title_init_element = event.target.parentNode.lastChild;
            let play_element = event.target.parentNode.children[2];
            $(title_init_element).stop().fadeOut(300);
            $(play_element).stop().fadeOut(350);
        },
        modifyActive(count){
            let lis = event.target.parentNode.parentNode.children;
            
            for(let i=0; i<lis.length; i++){
                if(i != count){
                    $(lis[i]).removeClass("active");
                    $(lis[i]).addClass("unactive");
                }else{
                    $(lis[count]).removeClass("unactive");
                    $(lis[count]).addClass("active");
                }
            }
        },
        playVideo(){
            this.$router.push("playVideo");
        },
        gotoTop(top_val){
            $(document).scrollTop(top_val);
        },
        columnColor(index){
            // console.log($(".nav .column li")[index]);
            // $(".nav .column li")[index];
        },
        scroll(){
            if($(document).scrollTop() >= 1270){
                this.columnColor(2);
            }else if($(document).scrollTop() >= 710){
                this.columnColor(1);
            }else if($(document).scrollTop() >= 170){
                this.columnColor(0);
            }
        }
    },
    created(){
        // this.all_array = $(".classification .all .all_moves .all_move");
        // console.log($(".classification .all .all_moves .all_move"));
    },
    mounted(){
        // 先给页面注册滚动事件
        document.addEventListener('scroll',this.scroll, true)
        this.all_array = $(".classification .all .all_moves .all_move");
        this.type1_array = $(".classification .type1 .type_infos .left .type_move");
        console.log(this.type1_array);
    }
}
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* 头部 */
    .header{
        width: 100%;
        height: 150px;
        margin-bottom: 30px;
        background-color: #94221b;
    }
    .header img{
        width: 100%;
        height: 150px;
    }

    /* 导航栏 */
    .nav{
        position: fixed;
        width: 60px;
        height: 400px;
        top: 220px;
        right: 5px;
        border-radius: 5px;
        border: 1px solid #ddd;
        background-color: #fff;
        user-select: none;
        z-index: 10;
    }
    .in,.out{
        position: fixed;
        top: 178px;
        right: 15px;
        /* cursor: pointer; */
    }
    .out{
        display: none;
    }
    .column{
        width: 100%;
        height: 390px;
        margin-top: 5px;
    }
    .column li{
        width: 100%;
        height: 30px;
        cursor: pointer;

        font-size: 12px;
        font-weight: bold;
        text-align: center;
        line-height: 30px;
    }
    .column .column_active{
        background-color: #1890ff;
        color: #fff;
    }
    .column li:hover{
        background-color: #409eff;
        color: #fff;

        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }

    /* 热门推荐 */
    .hot{
        position: relative;
        width: 1350px;
        height: 500px;
        margin-left: 100px;
        margin-bottom: 30px;

        border-bottom: 1px solid #ddd;
    }
    .hot .title{
        width: 1250px;
        height: 40px;
        margin-top: 10px;
        margin-left: 50px;
        padding-left: 1.5%;
        border-bottom: 2px solid #ddd;

        font-size: 25px;
        line-height: 40px;
        font-weight: bold;
        letter-spacing: 2px;
        color: #409eff;
    }
    .hot .lb{
        position: absolute;
        width: 600px;
        height: 360px;
        top: 100px;
        left: 70px;
        overflow: hidden;
    }
    .hot .lb img{
        width: 600px;
        height: 360px;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .hot .moves{
        position: absolute;
        width: 550px;
        height: 400px;
        top: 80px;
        right: 50px;
    }
    .hot .move{
        position: relative;
        width: 170px;
        height: 120px;
        border-radius: 3px;
        /* background-color: green; */
        float: left;
        margin-left: 10px;
        margin-top: 55px;
        
    }
    .hot .move p{
        width: 170px;
        height: 20px;
        background-color: #333;
        opacity: .95;
        color: rgb(255, 255, 255);
        border-radius: 3px;
        margin-top: -20px;
        cursor: pointer;

        font-size: 14px;
        text-align: center;
        line-height: 20px;
        letter-spacing: 5px;
    }
    .hot .move .mask{
        position: absolute;
        display: none;
        width: 170px;
        height: 120px;
        background-color: #333;
        opacity: .8;
        z-index: 5;
        top: 0;
        left: 0;
    }
    .hot .move .mask .description{
        width: 130px;
        height:110px;
        margin-left: 15px;
        border-radius: 0.5rem;
        line-height: 18px;
        user-select: none;
        padding: 6px 5px;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 1px;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
    }
    .hot .move img{
        position: absolute;
        width: 170px;
        height: 120px;
        border-radius: 5px;
        top: 0;
        left: 0;
    }
    .hot .move .move_info{
        display: none;
        position: absolute;
        width: 170px;
        height: 120px;
        bottom: 0px;
        left: 0;
        background-color: #333;
        opacity: .8;
        cursor: pointer;
    }
    .hot .move .title_init{
        position: absolute;
        width: 160px;
        height: 25px;
        bottom: 0;
        padding-left: 5px;
        padding-right: 5px;

        font-size: 15px;
        line-height: 25px;
        color: #fff;
        z-index: 5;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .hot .move .move_info .move_title{
        position: absolute;
        width: 150px;
        height: 50px;
        top: 0;
        padding-left: 10px;

        font-size: 15px;
        line-height: 25px;
        color: #fff;
        z-index: 5;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .hot .move .move_info .move_name,.hot .move .move_info .move_count{
        position: absolute;
        width: 150px;
        height: 30px;
        padding-left: 5px;
        color: #fff;
        left: 5px;
        font-size: 10px;
    }
    .hot .move .move_info .move_name{
        top: 60px;
    }
    .hot .move .move_info .move_count{
        top: 90px;
    }

    /* 分类 */
    .classification{
        width: 1368px;
        height: 1500px;
        /* border: 1px solid green; */
        margin-left: 5%;
        margin-bottom: 30px;
    }
    /* 全部（all） */
    .classification .all{
        width: 1368px;
        height: 550px;
        /* background-color: red; */
    }
    .classification .title{
        width: 90%;
        height: 50px;
        /* background-color: skyblue; */
        margin-left: 4%;
        padding-left: 1%;
        margin-top: 10px;

        font-size: 25px;
        line-height: 50px;
        font-weight: bold;
        letter-spacing: 1px;
        color: #409eff;
        border-bottom: 2px solid #ddd;
    }
    .classification .all .all_moves{
        width: 1220px;
        height: 450px;
        margin-left: 5%;
        margin-top: 20px;
        /* background-color: skyblue; */
    }
    .classification .all .all_moves .all_move, .classification .type1 .type_infos .left .type_move{
        position: relative;
        width: 200px;
        height: 200px;
        float: left;
        margin-top: 20px;
        margin-left: 35px;
        /* background-color: green; */
    }
    .classification .all .all_moves .all_move .move img, .classification .type1 .type_infos .left .type_move .move img{
        width: 190px;
        height: 130px;
        margin-left: 5px;
        cursor: pointer;
    }
    .classification .all .all_moves .all_move .move .all_mask, .classification .type1 .type_infos .left .type_move .move .type_mask{
        position: absolute;
        display: none;
        width: 190px;
        height: 130px;
        background-color: #333;
        opacity: .8;
        z-index: 5;
        top: 0;
        left: 5px;
    }
    .classification .all .all_moves .all_move .move p, .classification .type1 .type_infos .left .type_move .move p{
        width: 190px;
        height: 20px;
        background-color: #333;
        opacity: .95;
        color: rgb(255, 255, 255);
        border-radius: 3px;
        margin-top: -20px;
        margin-left: 5px;
        cursor: pointer;

        font-size: 14px;
        text-align: center;
        line-height: 20px;
        letter-spacing: 5px;
    }
    .classification .all .all_moves .all_move .move .description, .classification .type1 .type_infos .left .type_move .move .description{
        width: 150px;
        height:100px;
        margin-left: 15px;
        border-radius: 0.5rem;
        line-height: 19px;
        user-select: none;
        padding: 6px 5px;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 1px;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
    }
    .classification .all .all_moves .all_move .all_info, .classification .type1 .type_infos .left .type_move .type_info{
        width: 190px;
        height: 60px;
        margin-left: 5px;
        /* background-color: red; */
    }
    .classification .all .all_moves .all_move .all_info .all_title, .classification .type1 .type_infos .left .type_move .type_info .type_title{
        position: absolute;
        width: 175px;
        height: 40px;
        padding-left: 5px;
        padding-right: 5px;

        font-size: 15px;
        line-height: 20px;
        color: #333;
        z-index: 5;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .classification .all .all_moves .all_move .all_info .all_author, .classification .type1 .type_infos .left .type_move .type_info .type_author{
        position: absolute;
        width: 175px;
        height: 20px;
        bottom: 5px;
        margin-left: 5px;
        font-size: 10px;
        line-height: 20px;
        color: #999;
    }
    .classification .all .all_moves .all_move .move_mask .play, .classification .type1 .type_infos .left .type_move .move_mask .play{
        position: absolute;
        left: 80px;
        top: 50px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        z-index: 6;
    }
    .classification .all .all_moves .all_move .move_mask, .classification .type1 .type_infos .left .type_move .move_mask{
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 190px;
        height: 130px;
        margin-left: 5px;
        cursor: pointer;
        background: rgba(51, 51, 51,.5)
    }
    /* 类型1（type1） */
    .classification .type1{
        width: 1368px;
        height: 550px;
    }
    .classification .type1 .type_infos{
        position: relative;
        width: 1220px;
        height: 450px;
        margin-left: 5%;
        margin-top: 20px;
    }
    .classification .type1 .type_infos .left{
        position: absolute;
        width: 850px;
        height: 440px;
        top: 20px;
    }
    .classification .type1 .type_infos .rank{
        position: absolute;
        top: -10px;
        right: 220px;
        width: 100px;
        height: 30px;
        /* background-color: blue; */
        font-size: 20px;
        letter-spacing: 2px;
        font-weight: bold;
        color: #409eff;

    }
    .classification .type1 .type_infos .right{
        position: absolute;
        width: 300px;
        height: 400px;
        right: 20px;
        top: 25px;
        /* background-color: red; */
    }
    .classification .type1 .type_infos .left .type_move{
        float: left;
        margin-left: 10px;
    }
    .classification .type1 .type_infos .right ul li{
        position: relative;
        width: 300px;
        height: 34px;
        /* border-bottom: 1px solid #ddd; */
        cursor: pointer;
    }
    .classification .type1 .type_infos .right ul li span{
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 20px;
        left: 0;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
    }
    .classification .type1 .type_infos .right ul .unactive span{
        top: 7px;
    }
    .classification .type1 .type_infos .right ul .active span{
        top: 37px;
    }
    .classification .type1 .type_infos .right ul .unactive img{
        display: none;
    }
    .classification .type1 .type_infos .right ul .unactive .li_title{
        position: absolute;
        width: 270px;
        height: 34px;
        left: 25px;
        font: 0;
        line-height: 34px;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .classification .type1 .type_infos .right ul .active{
        height: 94px;
    }
    .classification .type1 .type_infos .right ul .active img{
        position: absolute;
        display: block;
        width: 130px;
        height: 80px;
        top: 7px;
        left: 25px;
    }
    .classification .type1 .type_infos .right ul .active .li_title{
        position: absolute;
        width: 140px;
        height: 60px;
        top: 17px;
        right: 0px;
        line-height: 30px;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* 底部 */
    .footer{
        width: 100%;
        height: 380px;
    }
    /* 网站信息 */
    .info{
        position: relative;
        width: 100%;
        height: 280px;
        background-color: #F5F5F5;
    }
    .info .left{
        position: absolute;
        width: 70%;
        height: 90%;
        left: 0;
        top: 5%;
        border-right: 1px solid #999;
    }
    .info .left .ll,.info .left .lr{
        position: absolute;
        width: 30%;
        height: 200px;

        line-height: 35px;
        letter-spacing: 1px;
    }
    .info .left .ll{
        top: 40px;
        left: 15%;
    }
    .info .left .lr{
        top: 40px;
        right: 15%;
    }
    .info .right{
        position: absolute;
        width: 30%;
        height: 90%;
        right: 0;
        top: 5%;
    }
    .info .right .rl, .info .right .rr{
        position: absolute;
        width: 100px;
        height: 100px;
        top: 80px;
        
        font-size: 15px;
        font-weight: bold;
        text-align: center;
        letter-spacing: 1px;
    }
    .info .right img{
        width: 70px;
        height: 70px;
        border: 1px soild #999;
    }
    .info .right .rl{
        left: 80px;
    }
    .info .right .rr{
        left: 220px;
    }

    /* 版权信息 */
    .copyright{
        position: absolute;
        width: 100%;
        height: 100px;
        background-color: #525252;
    }
    .copyright .left,.copyright .right{
        position: absolute;
        width: 20%;
        height: 100%;
        font-size: 15px;
        line-height: 25px;
        text-align: center;
        color: #fff;
    }
    .copyright .left img{
        width: 50px;
        height: 50px;
    }
    .copyright .right img{
        width: 40px;
        height: 40px;
    }
    .copyright .left{
        left: 30%;
        top: 10px;
    }
    .copyright .right{
        left: 50%;
        top: 5px;
    }

    /* 返回顶部 */
    .top{
        position: fixed;
        right: 20px;
        bottom: 25px;
    }
</style>